<template>
    <div class="cartContainer">
        <h2>购物车</h2>
        <ul class="mui-table-view">
                <router-link v-for="item in cart" :key="item.id" class="mui-table-view-cell mui-media" :to="'/home/goodsinfo/' + item.id" tag="li">
                    
                     <img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
						<p class="goods-info">
                            <span class="title">{{item.title}}</span>
                            <span class="price">{{item.price}}</span>
                        </p>
                        <p class="goods-control">
                            <numberBox :initCount="item.count" :min="1" :max="item.stock" :goodsId="item.id" :isChangeStore="true"></numberBox>
                            <span class="remove" @click.stop="remove(item.id)">×</span>
                        </p>
						</div>
                        
                </router-link>
            <li class="mui-table-view-cell mui-media total-price">
                总金额:<span class="price">￥{{this.$store.getters.getTotalPrice}}</span>
            </li>
        </ul>
        <button type="button" class="mui-btn mui-btn-danger mui-btn-block">结算</button>
    </div>
</template>

<script>
import numberBox from '../subComponents/numberBox.vue';
export default {
        // 购物车数据结构
        // 1.数组[ {id:xxx,img_url:xxx,title:xxx,count:xxx,price:xxx}, ]
        data(){
            return{
                cart:[],
            }
        },
        created(){
            this.getCart();
        },
        methods:{
            getCart:function(){
            //    this.cart = this.$store.state.cart;
            this.cart = JSON.parse(localStorage.getItem('cart') || '[]');
            },
            remove(goodsId){
                this.$store.commit('removeGoods',goodsId);
                this.getCart();
            }
        },
        components:{
            numberBox,
        }
}
</script>

<style lang="less">
.cartContainer{
     h2{
         font-size: 18px;
         font-weight: bold;
         text-align: center;
         color:#444;
         padding: 8px;
         background-color: #fff;
     }
     .mui-table-view{
         margin: 0;
         .mui-table-view-cell{ //li标签
            width: 100%;

            .mui-media-object{ //图片
                max-width: 100px;
                width: 100px;
                height:80px;

            }
            .mui-media-body{
                .goods-info{
                    font-size: 16px;
                    color:#444;
                    line-height: 20px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    .price{
                        color:#222;
                        font-weight: bold;
                    }
                }
                .goods-control{
                    display: flex;
                    justify-content: space-between;
                    .remove{
                        font-size: 30px;
                        padding: 10px;
                    }
                }
            }
         }
         .total-price{
             font-size: 16px;
             color:#333;
             font-weight: bold;
             text-align: center;
             background-color: #fff;
             padding: 10px;
            .price{
                color:#ce0000;
            }
         }

     }
    .mui-btn-danger{
        position: fixed;
        bottom: 50px;
        margin:0;
    }
     
}
</style>